<template>
  <div class="nav-bar">
    <!-- 左侧 Logo + 标题 -->
    <div class="nav-left" @click="goTo('/index')">
      <img style="width: 75px" src="../../public/log.png" alt="zzzyh论坛 logo" />
    </div>

    <!-- 右侧导航项 -->
    <div class="nav-right">
      <div class="nav-item" id="searchDiv">
        <div class="mt-4">
          <el-input v-model="input" style="max-width: 700px;width: 400px;height: 50px;" placeholder="请输入关键字"
          class="input-with-select">
  <template #append>
    <el-button :icon="Search" id="searchBtn" style="height: 100%;" @click="performSearch" />
  </template>
</el-input>
        </div>
      </div>


      <div class="nav-item" id="userDiv">
        <el-popover :width="350"
          popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
          <template #reference>
            <el-avatar :icon="UserFilled" style="height: 50px;width: 50px;" />
          </template>
          <template #default>
            <div class="user-profile-content">
              <!-- 头像 -->
              <el-avatar :size="60" :icon="UserFilled" />

              <!-- 昵称 + 用户名 -->
              <div class="user-text">
                <p class="demo-rich-content__name">{{ nickname }}</p>
                <p class="demo-rich-content__mention">@{{ username }}</p>
              </div>

              <!-- 简介 -->
              <p class="demo-rich-content__desc">{{ remark }}</p>
            </div>

            <el-divider />
            <!-- 修改部分 -->
            <div class="dropdown-container">
              <!-- 我的主页 -->
              <p class="dropdown-item" tabindex="0" @click="goHome" style="width: 100%;">
                <el-icon>
                  <HomeFilled />
                </el-icon>
                <span style="margin-left: 8px;">我的主页</span>
              </p>

              <!-- 个人中心 -->
              <p class="dropdown-item" tabindex="0" @click="goTo('profile')" style="width: 100%;">
                <el-icon>
                  <UserFilled />
                </el-icon>
                <span style="margin-left: 8px;">个人中心</span>
              </p>

              <el-divider />

              <!-- 退出登录 -->
              <p class="dropdown-item" tabindex="0" @click="toLogout()" style="width: 100%;">
                <el-icon>
                  <SwitchButton />
                </el-icon>
                <span style="margin-left: 8px;">退出</span>
              </p>
            </div>
          </template>
        </el-popover>
      </div>
      <div class="nav-item icon-container">
        <el-icon size="30" @click="goTo('/privateMessagePage')">
          <Bell />
        </el-icon>
      </div>

      <div class="nav-item" id="createDiv">
        <el-button @click="goTo('/editArticle')" style="height: 40px; width: 100px;">
          <el-icon>
            <Edit />
          </el-icon>
          <span style="margin-left: 8px;">创作</span>
        </el-button>
      </div>
    </div>


  </div>

  <div id="boardDiv">
    <Board></Board>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { UserFilled } from '@element-plus/icons-vue'
import { getUserInfo } from '@/api/userApi'
import { UserInforStore } from '../stores/userInforStore.js'
import { logout } from '@/api/userApi'
import { useTokenStore } from '@/stores/tokenStore.js'
import Board from './Board.vue'
import { Edit } from '@element-plus/icons-vue'
// import { searchArticles} from '../api/articlesApi.js'


const input = ref('')
const router = useRouter()
const tokenStore = useTokenStore()

const { userInfor, updateUserInfor, removeUserInfor } = UserInforStore()
const username = ref('')
const nickname = ref('')
const avatarUrl = ref('')
const remark = ref('')

function toLogout() {
  logout().then(res => {
    console.log(res);
    updateUserInfor(null)
    tokenStore.updateToken(null)
    router.push({ path: '/login' })
  })
}

getUserInfo().then(res => {
  console.log(res);
  updateUserInfor(res)
  username.value = res.username
  nickname.value = res.nickname
  avatarUrl.value = res.avatarUrl
  remark.value = res.remark
})

function goTo(url) {
  window.open(url, '_blank');

  // console.log('goto' + url);
  // if(url == '/createArticle' || url == 'privateMessagePage'){
  //   return
  // }
  // router.push({ path: url })
}
function goHome(){
  
  console.log(userInfor.id);
  window.open(`/homePage/${userInfor.id}`, '_blank');
  
}

// async function performSearch() {
//   const keyword = input.value.trim();
//   if (!keyword) return;

//   try {
//     const res = await searchArticles(keyword);

//     console.log('搜索结果:', res);

//     // 处理返回的数据，更新状态或展示在页面上
//   } catch (error) {
//     console.error('搜索失败:', error);
//   }
// }

// 定义 emit
const emit = defineEmits(['search'])

async function performSearch() {
  const keyword = input.value.trim();
  if (!keyword) return;

  emit('search', keyword); // 触发搜索事件
}

</script>

<style scoped>
#searchBtn:hover,
#createDiv .el-button:hover {
  background-color: #409EFF;
  color: white;
}

.dropdown-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 整体居中 */
  text-align: center;
}

.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 水平居中 */
  padding: 8px 12px;
  margin: 6px 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.user-profile-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.user-profile-content .demo-rich-content__name,
.user-profile-content .demo-rich-content__mention,
.user-profile-content .demo-rich-content__desc {
  margin: 0;
}

.user-profile-content .demo-rich-content__name {
  font-weight: 500;
}

.user-profile-content .demo-rich-content__mention {
  font-size: 14px;
  color: var(--el-color-info);
}

.icon-container {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  height: 50px;
  /* 设置高度以确保垂直居中效果可见 */
}

#searchBtn {
  background-color: rgb(221.7, 222.6, 224.4);
  color: #333;
  border-color: none;
  transition: background-color 0.3s ease;
  /* 添加过渡动画，使颜色变化更平滑 */
}

/* 当按钮获得焦点时改变背景颜色 */
#searchBtn:hover {
  outline: none;
  /* 去除默认的聚焦外框 */
  background-color: #000;
  color: #fff;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin: 6px 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #f5f7fa;
  outline: none;
  /* 去除默认 focus 边框 */
}

#userDiv {
  display: flex;
}

#userDiv>div {
  flex: 1;
  text-align: center;
}

#userDiv>div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 94%;
  height: 100px;
  padding: 0 20px;
  background-color: #fff;
}


#boardDiv {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中（可选） */
  /* width: 100%; */
  /* 使用全宽 */
  padding: 10px 0;
  /* 上下内边距，避免贴边 */
  background-color: #fff;
  box-sizing: border-box;
}

.nav-left {
  display: flex;
  align-items: center;
}

.menu-title {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #409EFF;
  letter-spacing: 1px;
  margin-left: 10px;
}

.nav-right {
  display: flex;
  gap: 20px;
}

.nav-item {
  cursor: pointer;
  font-size: 20px;
  color: #333;
  transition: color 0.3s;
  display: flex;
  /* 添加 */
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中（可选） */
  height: 50px;
  /* 与用户头像等高度保持一致 */
}

.nav-item:hover {
  color: #409EFF;
}

.user-profile-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  /* 控制整体元素之间的垂直间距 */
}

.user-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* 控制昵称与用户名之间的间距 */
}
</style>